<template>
	<view>
		<uni-popup ref="showLogin" type="center" :animation="true">
			<view class="np-login">
				<view class="np-title">您还没有登录</view>
				<input v-model="phone_number" placeholder-class="np-placeholder" maxlength="11" class="np-input" type="number"
				 placeholder="请输入手机号" />
				<input v-model="password" placeholder-class="np-placeholder" class="np-input" type="password" placeholder="请输入密码" />
				<view class="np-btn" @click="webLogin">登录</view>
				<view class="np-footer">
					<text class="np-text" @click="forget">忘记密码</text>
					<text>|</text>
					<text class="np-text" @click="register">注册帐号</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<text class="np-other">其它账号登录</text>
				<view class="np-list">
					<button class="np-item" @getuserinfo="wxLogin" open-type="getUserInfo" withCredentials="true">
						<text class="npIcon-weixin"></text>
						<text class="np-item-text">微信授权</text>
					</button>
				</view>
				<!-- #endif -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	export default {
		name: "npLoginToast",
		mixins: [base],
		data() {
			return {
				phone_number: "",
				password: "",
				show: false
			}
		},
		methods: {
			open() {
				this.$refs.showLogin.open();
			},
			register(){
				this.$refs.showLogin.close();
				uni.navigateTo({
					url: "/pages/public/register"
				});
			},
			forget(){
				this.$refs.showLogin.close();
				uni.navigateTo({
					url: "/pages/public/forget"
				});
			},
			webLogin() {
				var phone_reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!phone_reg.test(this.phone_number)) {
					this.$config.toast('手机号不正确，请重新输入');
					return;
				};
				if (this.password.length == 0) {
					this.$config.toast('请输入密码');
					return;
				}
				let data = {
					mobile: this.phone_number,
					password: this.password
				};
				uni.showLoading({
					title: "登录中..."
				});
				this.$http.post('api/passport/login', data).then((res) => {
					uni.hideLoading();
					this.login(res);
					// #ifdef MP-WEIXIN||MP-QQ
					this.resetConfig(res.member);
					// #endif
					this.$refs.showLogin.close();
				}).catch((error) => {
					uni.hideLoading();
					this.$config.toast(error.message);
				});
			},
			wxLogin() {
				uni.showLoading({
					title: "登录中..."
				});
				uni.login({
					provider: 'weixin',
					success: (res) => {
						uni.getUserInfo({
							success: (infoRes) => {
								let data = {
									code: res.code,
									signature: infoRes.signature,
									encryptedData: infoRes.encryptedData,
									rawData: infoRes.rawData,
									iv: infoRes.iv,
								};
								this.$http.post('api/passport/wechat-mp', data).then((res) => {
									uni.hideLoading();
									this.login(res);
									// #ifdef MP-WEIXIN||MP-QQ
									this.resetConfig(res.member);
									// #endif
									this.$refs.showLogin.close();
								}).catch((error) => {
									uni.hideLoading();
									this.$config.toast(error.message);
								});
							},
							fail: () => {
								console.log('err')
								//获取不到信息
							}
						});
					},
					fail: (err) => {
						console.log('err')
					}
				});
			},
			resetConfig(userInfo){
				if (userInfo.account.user_money > 0 && this.globalConfig.wechat_mod == 0) {
					let config = this.globalConfig;
					config.wechat_mod = 1;
					this.setGlobalConfig(config);
					this.setReloadIndex(true);
				}
			},
		}
	}
</script>

<style lang="scss">
	.np-login {
		width: 580rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 9999;
	}

	.np-title {
		flex: 1;
		font-size: 34rpx;
		color: rgb(5, 187, 29);
	}

	.np-placeholder {
		font-size: 28rpx;
		line-height: 88rpx;
	}

	.np-input {
		flex: 1;
		width: 500rpx;
		height: 88rpx;
		margin-top: 50rpx;
		background-color: rgb(238, 238, 238);
		padding-left: 30rpx;
		border-radius: 50rpx;
		box-shadow: 2rpx 2rpx 10rpx 0rpx #dfdee3;
	}

	.np-btn {
		flex: 1;
		margin-top: 50rpx;
		height: 88rpx;
		width: 500rpx;
		border-radius: 50rpx;
		background-color: #ff5500;
		text-align: center;
		line-height: 88rpx;
		color: white;
		box-shadow: 0rpx 5rpx 10rpx #a2a2a2;
	}

	.np-footer {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		margin-top: 20upx;
		color: rgb(126, 126, 126);
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}

	.np-text {
		font-size: 24upx;
		margin-left: 15upx;
		margin-right: 15upx;
	}

	.np-other {
		flex: 1;
		font-size: 28rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 20rpx;
		position: relative;
		padding: 0rpx 10rpx;
		color: rgb(126, 126, 126);
	}

	.np-list {
		flex: 1;
		height: 100rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.np-item {
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.npIcon-weixin {
		color: rgb(5, 187, 29);
		font-size: 68rpx;
	}
	
	.np-item-text{
		font-size: 24rpx;
		color: rgb(126, 126, 126);
	}
	
	.np-list button{
		border-radius: 0;
		background-color: #fff;
		padding: 0;
		margin: 0;
		line-height:inherit;
	}

	.np-list button::after {
		border: none;
	}
</style>
